<template>
  <el-row :gutter="4"
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"

  >
  <div class="digital-view-dialog">
    <div class="block">
      <span class="demonstration">时间周期 :  </span>
      <el-date-picker
        v-model="value2"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
        @change="ccc"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions">
      </el-date-picker>
    </div>
    <el-row style="height: 330px">
      <el-col :span="12" style="background-color: #8fdcbe">
        <digital-point-status-list ref="digital_point_status_list"/>
      </el-col>
      <el-col :span="12" style="background-color: #8fdcbe">
        <digital-point-status-rate-chart ref="digital_point_status_rate_chart"/>
      </el-col>
    </el-row>
    <digital-status-bar-chart ref="digital_status_bar_chart"/>
  </div>
  </el-row>
</template>

<script>
  import DigitalPointStatusList from '@/components/DigitalPointStatusList';
  import DigitalPointStatusRateChart from '@/components/DigitalPointStatusRateChart';
  import DigitalStatusBarChart from '@/components/DigitalStatusBarChart';


  export default {

    name: "DigitalView",
    components: {DigitalPointStatusList, DigitalPointStatusRateChart,DigitalStatusBarChart},
    data() {
      return {
        visible: false,
        title: '',
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 1);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近六个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 6);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value2:[],
        device_id:0,
        index:0,
        point_id:0,
        loading:true
      }
    },
    created(){
      this.getformData();
    },
    mounted() {

    },
    props: ['pointId'],
    methods: {
      initView(device_id, index, point_id) {
        let p=this;
        p.point_id=point_id;
        p.device_id=device_id;
        p.index=index;
        let startTime = this.dateFilter(p.value2[0]);
        let endTime = this.dateFilter(p.value2[1]);
        this.$axios.post('pointDataRecordRoutes', {
          point_id: point_id,
          action_type: 'digitalPointStatusRecord',
          firstDate:startTime,
          secondDate:endTime
        }).then(function (response) {
          if(p.loading==true){
            p. loading=false;
          }
          let data = response.data;
          //在这存值存到setData里面之后setData(参数)就可以调用它
          p.$refs.digital_point_status_list.setData(data.gridData);
          p.$refs.digital_status_bar_chart.setData(data.typeInvObj);
        });

      },


      initViewA(device_id, index, point_id) {
        let p=this;
        this.$axios.post('pointDataRecordRoutes', {
          point_id: point_id,
          action_type: 'digitalPointRatioStatusRecord'
        }).then(function (response) {
          if(p.loading==true){
            p. loading=false;
          }

          let data = response.data;
          //在这存值存到setData里面之后setData(参数)就可以调用它
          p.$refs.digital_point_status_rate_chart.setData(data.statusTimesObj);
        });

      },
      dateFilter:function (input) {
        var d = new Date(input);
        var year = d.getFullYear();
        var month = d.getMonth() <9 ? '0' + (d.getMonth() + 1) : '' + (d.getMonth() + 1);
        var day = d.getDate() <10 ? '0' + d.getDate() : '' + d.getDate();
        // var hour = d.getHours();
        // var minutes = d.getMinutes();
        // var seconds = d.getSeconds();
        return  year+ '-' + month + '-' + day;
      },
      getformData(){
        let c=this;
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24);
        c.value2=[start,end];
      },
      ccc(){
        this. loading=true;
        this.initView(this.device_id, this.index, this.point_id)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .digital-view-dialog {
    padding: 0px;
    height: 650px;

  }
  .block{
    background-color: #383b3e;
    padding:20px 20px 10px 15px;
    .demonstration{
      color:#fff;
    }

  }
</style>
